<!--
 * @Author: yuqy
 * @Date: 2023-04-10 19:26:39
 * @LastEditors: yuqy
 * @LastEditTime: 2023-10-24 11:45:15
 * @Descripttion: -
-->

<template>
  <div class="contain_wrap">
    <div class="header_wrap">
      <div class="menu_wrap">
        <!-- <Icon type="md-remove" style="color: #fff;margin-right: 10px;" @click="exit(1)"/> -->
        <Icon type="md-close" class="close" @click="exit(2)"/>
      </div>
    </div>
    <div :class="getClassName">
      <div class="video" v-for="(user, index) in sreenUserList" :key="index">
        <h2>{{ user.name }}</h2>
        <video autoplay muted class="live_video" :id="'audience_live_video' + user.uid "></video>
      </div>
    </div>
    <div class="no_data" v-if="sreenUserList.length <= 0">
      <h2>
        <Icon type="md-sad" style="font-size: 88px;color: #fe6400;"/> {{ noData }}
      </h2>
    </div>
  </div>
</template>
<script >
import { Icon } from "view-ui-plus";
import { onMounted } from 'vue';
import util from "@/libs/util";
// 用于页面间通信
const userMsgBc = new BroadcastChannel("getUserMainMsg");
const myIndexedDB = util.getLocalforage();
export default {
  name: "audience",
  setup() { 
    onMounted (() => {}) 
  },
  components: {
    Icon
  },
  mixins: [],
  data() {
    return {
      code: null,
      showList: 0,
      noData: "当前课堂还没有听众~~",
      isfull: false, // 是否单个全屏状态
      sreenUserList: []
    };
  },
  computed: {
    getClassName () {
      let n = 'user_list_wrap'
      if (this.sreenUserList.length >= 2) {
        n = 'user_list_wrap video_two'
      }
      if (this.sreenUserList.length >= 3) {
        n = 'user_list_wrap video_three'
      }
      return n
    }
  },
  async created() {
    this.code = this.$route.query.code;
    await this.getUserList();
    this.getInitBC();
  },
  mounted() {},
  methods: {
    /**
     * @name: 页面之间 进行消息通信
     * @msg:
     * @return {*}
     */
    getInitBC() {
      userMsgBc.onmessage = res => {
        let { type, val, name } = res.data;

        // 人员有了变动,不处于全屏状态
        if (type == "userChange") {
          this.getUserList();
        }

        // 收到通知 主动进行关闭
        if (type == "close") {
          window.close();
        }
      };
      // 向主页面 发送已经打开的信息
      userMsgBc.postMessage({ type: "audienceIsOpen" })
    },
    async getUserList() {
      let list = await myIndexedDB.getItem('nowUserList');
      if (Array.isArray(list)) {
        // 有全屏的
        let isFull = list.find(s => s.isfull);
        if (!!isFull) {
          this.sreenUserList = list.filter(s => { 
            return s.isfull
          })
        } else {
          this.sreenUserList = list;
        }
      }
    },
    async exit(type) {
      if (type == 1) {
        window.resizeTo(0, 0);
      }
      if (type == 2) {
        userMsgBc.postMessage({ type: "audienceIsClose" });
        window.close();
      }
    }
  }
};
</script>
<style scoped lang='less'>
.menu_wrap {
  font-size: 0px;
  position: fixed;
  z-index: 9999;
  top: 20px;
  right: 20px;
  .close {
    color: #fff;
    font-size: 36px;
    line-height: 26px;
    height: 36px;
    &:hover {
      transform-origin: center center;
      transition: all 0.85s;
      transform: rotateZ(360deg);
      color: #fff;
    }
  }
}
.contain_wrap {
  background: rgba(51, 51, 51, 1);
  height: 100vh;
  overflow: hidden;
}

.user_list_wrap {
  height: 100%;
  .video {
    display: block;
    height: 100%;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    h2 {
      padding: 2px 12px;
      border-radius: 5px;
      position: absolute;
      top: 20px;
      left: 10px;
      font-size: 16px;
      color: #fff;
      font-weight: 500;
      z-index: 999;
      background: rgba(143, 143, 143, 1);
    }
    video{
      display: block;
      width: 100%;
      height: 100%;
      background: #000;
    }
  }

  &.video_two {
    display: flex;
    align-items: center;
    .video {
      width: 50%;
      height: 50vh;
      &:nth-child(1) {
        margin-right: 10px;
      }
    }
  }

  &.video_three {
    overflow: hidden;
    font-size: 0;
    .video {
      width: calc(~"50% -  5px");
      height: calc(~"50vh -  5px");
      float: left;
      margin-bottom: 10px;
      &:nth-child(2n + 1) {
        margin-right: 10px;
      }
    }
  }
}

.no_data {
  color: #fff;
  padding-top: 80px;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  h2 {
    text-align: center;
    font-size: 32px;
    font-weight: 400;
    text-shadow: 2px 2px 10px #000;
  }
}
</style>
